<template>
	<view class="storeBox">
		<view class="top">
			<view class="">
				<u-input type="text" placeholder="请输入菜品名称" v-model="tradeName" confirm-type="search"
					@confirm="getGoodList"></u-input>
				<image src="https://www.yongshantuan.cn/images/yongshan/search.png" mode=""></image>
			</view>
		</view>
		<view class="commenMenu">
			<view :class="{'check':checkMenuIndex==index}" v-for="(item,index) in menuList" :key="index"
				@click="changeMenuIndex(index)">
				<view class="">{{item.title}}</view>
				<view class="">({{item.storeNum}})</view>
			</view>
		</view>
		<image class="addStore" @click="addGood"
			src="https://www.yongshantuan.cn/images/yongshan/platformSide/new.png" mode="">
		</image>
		<view class="storeBig">
			<view class="storeList" v-for="(item,index) in goodList" :key="item.id">
				<!-- <view class="name">
					<image :src="item.logo|getImg" mode="">
					</image>
					{{item.storeName}}
				</view> -->
				<view class="info">
					<image :src="item.productPicture|getImg" mode="">
					</image>
					<view class="">
						<view class="">{{item.tradeName}}</view>
						<view class="">
							<view>已售: {{item.soldCount}}份</view>
							<view>限购: {{item.limitBuy=='-1'?'不限':item.limitBuy+'份'}}</view>
						</view>
						<view class="">排序: {{item.sort}}</view>
						<view class="">¥{{item.commodityPrice?item.commodityPrice:item.commodityPriceCache}}</view>
					</view>
					<view class="">
						<view class="" :class="{'check':item.upFlag=='上架中'}" @click="showModal('up',index)">上架</view>
						<view class="" :class="{'check':item.upFlag=='下架中'}" @click="showModal('down',index)">下架</view>
					</view>
				</view>
				<view class="control">
					<view class="" @click="showEdit(item)">
						<image src="https://www.yongshantuan.cn/images/yongshan/platformSide/edit.png" mode="">
						</image>
						编辑
					</view>
					<view class="" @click="copyInfo(item)">
						<image src="https://www.yongshantuan.cn/images/yongshan/platformSide/copy.png" mode="">
						</image>
						复制
					</view>
					<view class="" @click="showModal('del',index)">
						<image src="https://www.yongshantuan.cn/images/yongshan/del.png" mode=""></image>
						删除
					</view>
				</view>
			</view>
		</view>
		<CommenFooter :checkIndex="1"></CommenFooter>
		<AddGood ref="addGood" :show="showAddGood" :type="showType" :editInfo="editInfo" @hideBox="hideBox"
			@showToast="showToast"></AddGood>
		<u-modal v-model="modalShow" :show-cancel-button="true" :content="content" @confirm="confirm"></u-modal>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getGoodList,
		editGood,
		deteleGood,
		getFoodStateTotal
	} from '@/utils/req/api.js'
	import CommenFooter from '@/components/footer/footer.vue'
	import AddGood from '@/components/addGood/addGood.vue'
	export default {
		components: {
			CommenFooter,
			AddGood
		},
		data() {
			return {
				selectVisiable: false,
				checkStoreInfo: '',

				checkMenuIndex: 0,
				menuList: [{
						title: '全部商品',
						storeNum: '0'
					},
					{
						title: '上架中',
						storeNum: '0'
					},
					{
						title: '下架中',
						storeNum: '0'
					},
					{
						title: '限购',
						storeNum: '0'
					},
				],
				goodList: [],
				showAddGood: false, //是否展示新增商品弹窗
				showType: '', //是新增还是编辑
				editInfo: '', //若是编辑则记录对应商品信息
				modalShow: false, //是否展示modal提示框
				modalType: '', //modal的种类
				content: '',
				deleteIndex: '', //点击删除订单列表对应的index
				upIndex: '', //点击上架商品时对应的id
				downIndex: '', //点击下架商品时对应的id

				tradeName: '', //搜索参数
				pageNo: 1,
				pageSize: 10,
				moreGoodFlag: false,
				stateTotalInfo: '',
				upFlag: null,
				limitBuy: null
			}
		},
		onShow() {
			this.getGoodList();
			this.getFoodStateTotal()
		},
		methods: {
			showToast(message, type) {
				this.$showToast.call(this, message, type);
			},
			async getFoodStateTotal() {
				let res = await getFoodStateTotal();
				this.stateTotalInfo = res.data.result;
				this.menuList[0].storeNum = res.data.result.allCount;
				this.menuList[1].storeNum = res.data.result.yesCount;
				this.menuList[2].storeNum = res.data.result.noCount;
				this.menuList[3].storeNum = res.data.result.limitCount;
			},
			//获取商品列表
			async getGoodList(type) {
				let res = await getGoodList({
					pageSize: this.pageSize * this.pageNo,
					pageNo: 1,
					tradeName: this.tradeName,
					upFlag: this.upFlag,
					limitBuy: this.limitBuy
				});
				this.goodList = [];
				this.goodList = res.data.result.records;
			},
			showSelect() {
				this.selectVisiable = true;
			},
			selectThis(item) {
				this.checkStoreInfo = item;
				this.selectVisiable = false;
			},
			changeMenuIndex(index) {
				this.checkMenuIndex = index;
				switch (index) {
					case 0:
						this.upFlag = '';
						this.limitBuy = null;
						break;
					case 1:
						this.upFlag = 'YES';
						this.limitBuy = null;
						break;
					case 2:
						this.upFlag = 'NO';
						this.limitBuy = null;
						break;
					case 3:
						this.upFlag = null;
						this.limitBuy = '1';
						break;
				}
				this.getGoodList()
			},
			addGood() {
				this.showAddGood = true;
				this.showType = 'add';
			},
			hideBox(type) {
				this.showAddGood = false;
				this.getGoodList();
			},
			//展示编辑商品弹窗并预设值
			showEdit(value) {
				this.showAddGood = true;
				this.showType = 'edit';
				this.editInfo = value;
			},
			copyInfo(value) {
				this.showAddGood = true;
				this.showType = 'copy';
				this.editInfo = value;
			},
			//展示modal弹窗
			showModal(type, index) {
				if (type == 'del') {
					this.deleteIndex = index;
					this.modalType = 'delete';
					this.content = '是否要删除这个商品'
				} else if (type == 'up') {
					if (this.goodList[index].upFlag == '上架中') {
						return;
					}
					this.upIndex = index;
					this.modalType = 'up';
					this.content = '是否要上架这个商品'
				} else if (type == 'down') {
					if (this.goodList[index].upFlag == '下架中') {
						return;
					}
					this.downIndex = index;
					this.modalType = 'down';
					this.content = '是否要下架这个商品'
				}
				this.modalShow = true;
			},
			async changeGoodState(type, state) {
				let obj = JSON.parse(JSON.stringify(this.goodList[type == 'up' ? this.upIndex : this.downIndex]));
				obj.upFlag = type == 'up' ? '上架中' : '下架中';

				let res = await editGood(obj);
				if (res.data.success) {
					this.getGoodList()
					this.getFoodStateTotal()
					this.showToast(type == 'up' ? '上架成功' : '下架成功', 'success');
				} else {
					this.showToast(res.data.message, 'warning');
				}
			},
			async deteleGood() {
				let res = await deteleGood({
					id: this.goodList[this.deleteIndex].id
				});
				if (res.data.success) {
					this.getGoodList();
					this.getFoodStateTotal()
					this.showToast('删除商品成功', 'success');
				} else {
					this.showToast(res.data.message, 'warning');
				}
			},
			//共用确认函数
			async confirm() {
				this.modalShow = false;
				if (this.modalType == 'up') {
					this.changeGoodState('up', '上架中')
				} else if (this.modalType == 'down') {
					this.changeGoodState('down', '下架中')
				} else if (this.modalType == 'delete') {
					this.deteleGood();
				}
			},
		},
		onReachBottom() {
			if (!this.moreGoodFlag) {
				if (this.goodList.length != 0 && this.goodList.length % this.pageSize == 0) {
					this.pageNo = this.pageNo + 1;
					this.moreGoodFlag = true
					this.getGoodList();
					setTimeout(() => {
						this.moreGoodFlag = false;
					}, 1000)
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.storeBox {
		background-color: #F5F5F5;
		padding-bottom: 200rpx;
		min-height: 100vh;
	}

	.top {
		padding: 20rpx;
		@include flex(space-between, center);
		background-color: #fff;

		>view {
			@include flex();
			flex: 1;
			margin-left: 20rpx;
			@include flex();

			image {
				width: 50rpx;
				height: 50rpx;
				position: absolute;
				left: 10rpx;
				top: 5rpx;
			}

			border-radius: 50rpx;
			border: 1px solid #f5f5f5;
			position: relative;
			overflow: hidden;

			/deep/.u-input__input {
				font-size: 28rpx;
				line-height: 60rpx;
				height: 60rpx;
				min-height: auto !important;
				text-indent: 60rpx;
				background-color: #f5f5f5;
			}
		}
	}

	.commenMenu {
		@include flex();
		padding: 20rpx;
		background-color: #fff;
		font-size: 30rpx;

		>view {
			width: 25%;
			flex-direction: column;
			@include flex(center, center);
			transform: all 0.5s;

			&:active {
				transform: scale(1.05);
			}

			>view {
				font-size: 32rpx;

				&:nth-child(2) {
					font-size: 24rpx;
					line-height: 2;
				}
			}
		}

		margin-bottom: 40rpx;

		.check {
			color: #FA690A;
			font-weight: bold;
		}
	}

	.storeBig {
		.storeList {
			background-color: #fff;
			padding: 30rpx 20rpx;
			margin-bottom: 20rpx;

			.name {
				@include flex();

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
			}

			.info {
				margin: 20rpx 0;
				@include flex();

				image {
					width: 160rpx;
					height: 160rpx;
					margin-right: 40rpx;
					border-radius: 10rpx;
				}

				>view:nth-child(2) {
					height: 160rpx;
					@include flex(space-between, flex-start);
					flex-direction: column;
					flex: 1;
					line-height: 1;
					width: calc(100% - 450rpx);
					margin-right: 20rpx;

					>view:nth-child(1) {
						width: 100%;
						font-size: 32rpx;
						font-weight: bold;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}

					>view:nth-child(2) {
						font-size: 28rpx;
						@include flex();
						color: rgba(0,0,0,0.55);

						>view:nth-child(1) {
							margin-right: 20rpx;
						}
					}

					>view:nth-child(3) {
						font-size: 28rpx;
						color: rgba(0,0,0,0.55);
						
						// color: red;
						// font-weight: bold;
					}
				}

				view:nth-child(3) {
					width: 160rpx;

					>view {
						border: 1px solid #eee;
						font-size: 28rpx;
						line-height: 2;
						border-radius: 50rpx;
						text-align: center;
						margin: 20rpx 0;
					}

					>.check {
						color: #FA690A;
						border: 1px solid #FA690A;
					}
				}
			}

			.control {
				@include flex();
				border-top: 1px solid #eee;
				padding: 20rpx 0;

				>view {
					width: calc(100% / 3);
					@include flex(center, center);
					color: rgba(0, 0, 0, .55);

					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 20rpx;
					}
				}
			}
		}
	}

	.addStore {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		position: fixed;
		right: 0;
		bottom: 10vh;
	}

	.selectContent {
		padding: 40rpx;

		.title {
			font-size: 32rpx;
			line-height: 2;
			font-weight: bold;
			text-align: center;
			margin-bottom: 30rpx;
		}

		.selList {
			font-size: 28rpx;
			line-height: 2;
			border-bottom: 1px solid #eee;

			&:last-child {
				border: 0;
			}
		}
	}
</style>
<style lang="scss">
	//组件中引入uview需要在外部页面撰写样式，在组件内部不生效

	//添加商品组件的部分样式
	.addGoodBox {
		/deep/.u-drawer-right {
			width: 85% !important;
		}
	}
</style>
